<template>
  <section class="todoapp">
    <TodoListHeader @todoThings="someThings"></TodoListHeader>
    <TodoListBody
      :data="list"
      @delContent="delContent"
      @changeFlag="changeFlag"
    ></TodoListBody>
    <TodoListFooter></TodoListFooter>
  </section>
</template>

<script>
/* 引入 */
import TodoListHeader from './components/TodoListHeader.vue'
import TodoListBody from './components/TodoListBody.vue'
import TodoListFooter from './components/TodoListFooter.vue'
export default {
  /* 注册 */
  components: {
    TodoListHeader,
    TodoListBody,
    TodoListFooter,
  },
  methods: {
    /* 添加事件 */
    someThings(value) {
      console.log(value)
      this.list = [
        ...this.list,
        {
          flag: true,
          content: value,
          id: +new Date(),
        },
      ]
    },
    /* 修改事件 */
    changeFlag(id, flag) {
      this.list.forEach((item) => {
        if (item.id === id) item.flag = flag
      })
      console.log(flag)
    },
    /* 删除事件 */
    delContent(id) {
     const event = this.list.find(item =>item.id===id)
     if(event.flag===false)return alert('未完成，不建议删除')
      /* filter形成数组筛选 */
      
      this.list = this.list.filter(item => item.id !== id )

    },
  },
  /* 定义该组数据 */
  data() {
    return {
      list: [
        {
          flag: true,
          content: '读万卷书',
          id: 1,
        },
        {
          flag: false,
          content: '行万里路',
          id: 2,
        },
      ],
    }
  },
}
</script>

<style></style>
